<template>
  <div class="information">
    <h2>{{ $t("merchantbasicinformation") }}</h2>
    <div v-if="merModel" class="business-msg">
      <div class="lab-title">{{ $t("basicinformation") }}</div>
      <div class="user-msg">
        <div class="basic-information">
          <div>{{ $t("businessname") }}：{{ merData.mer_name }}</div>
          <div>{{ $t("merchantmobile ") }}：{{ merData.mer_phone }}</div>
        </div>
        <div v-if="merData.merchantCategory.category_name" class="basic-information">
          <div>
            {{ $t("merchantclassification") }}：{{
              merData.merchantCategory.category_name || ""
            }}
          </div>
          <div>
            {{ $t("MerchantCategory") }}：{{
              merData.is_trader ? $t("selfemployed") : $t("notselfemployed")
            }}
          </div>
        </div>
        <div class="basic-information">
          <div>{{ $t("nameofthepers") }}：{{ merData.real_name }}</div>
          <div>
            {{ $t("merchantsettlementtime") }}：{{ merData.create_time }}
          </div>
        </div>
        <!-- <div v-if="merData.sub_mchid" class="basic-information">
          <div>
            {{ $t("wechatserviceproviderid") }}: {{ merData.sub_mchid }}
          </div>
          <div v-if="merData.merchantType">
            {{ $t("storetype") }}：{{ merData.merchantType.type_name }}
          </div>
        </div> -->
        <div class="basic-information">
          <div>
            {{ $t("whethermerchant") }}：
            <el-switch v-model="merData.mer_state" :active-text="$t('open')" :inactive-text="$t('close')"
              :active-value="1" :inactive-value="0" />
            <span class="trip">{{ $t("tips1") }}</span>
          </div>
        </div>
      </div>
      <div class="business-msg">
        <div class="lab-title">{{ $t("storeinformation") }}</div>
        <div class="form-data">
          <el-form ref="ruleForm" :model="merData" :rules="rules" label-width="120px" class="demo-ruleForm">
            <el-form-item class="form-item" :label="'banner：(710*200px)'" prop="mer_banner">
              <div class="upLoadPicBox" title="750*750px" @click="modalPicTap('1')">
                <div v-if="merData.mer_banner" class="pictrue">
                  <img :src="merData.mer_banner" />
                </div>
                <div v-else class="upLoad">
                  <i class="el-icon-camera cameraIconfont" />
                </div>
              </div>
            </el-form-item>
            <el-form-item class="form-item" :label="$t('shopavatar') + '：(120*120px)'" label-width="120px"
              prop="mer_avatar">
              <div class="upLoadPicBox" title="750*750px" @click="modalPicTap('2')">
                <div v-if="merData.mer_avatar" class="pictrue">
                  <img :src="merData.mer_avatar" />
                </div>
                <div v-else class="upLoad">
                  <i class="el-icon-camera cameraIconfont" />
                </div>
              </div>
            </el-form-item>
            <el-form-item class="form-item" :label="$t('shopstreet') + 'banner：(710*134px)'" label-width="120px">
              <div class="tip-form">
                <div class="upLoadPicBox" title="750*750px" @click="modalPicTap('3')">
                  <div v-if="merData.mini_banner" class="pictrue">
                    <img :src="merData.mini_banner" />
                  </div>
                  <div v-else class="upLoad">
                    <i class="el-icon-camera cameraIconfont" />
                  </div>
                </div>
                <span class="trip">{{ $t("tips29") }}<br />{{ $t("tips30") }}</span>
              </div>
            </el-form-item>

            <el-form-item class="form-item" :label="$t('shopqualification')" label-width="120px" :prop="
              merData.sys_bases_status == 1 ? 'uploadedqualifications' : ''
            ">
              <div class="upLoadPicBox_qualification">
                <div v-for="(item, index) in uploadedQualifications" :key="index" class="uploadpicBox_list">
                  <div class="uploadpicBox_list_image">
                    <el-image ref="elImage" :src="item.url" :preview-src-list="[item.url]" />
                  </div>
                  <div class="uploadpicBox_list_method">
                    <i class="el-icon-delete" @click="deldetQualificationsList(index)" />
                    <i class="el-icon-view" @click="viewImage(item, index)" />
                  </div>
                </div>
                <el-upload :action="fileUrl" :show-file-list="false" list-type="picture-card" multiple
                  :headers="myHeaders" :on-success="setQualificationsList" :before-upload="beforeUploadQualification">
                  <i class="el-icon-plus" />
                </el-upload>
              </div>
            </el-form-item>
            <el-form-item :label="$t('deliverymethod')" prop="delivery_way">
              <el-checkbox-group v-model="merData.delivery_way">
                <el-checkbox v-for="item in deliveryList" :key="item.value" :label="item.value">
                  {{ item.name }}
                </el-checkbox>
              </el-checkbox-group>
              <span class="trip">{{ $t("tips27") }}</span>
            </el-form-item>
            <el-row v-if="
              (merData.delivery_way.length == 1 &&
                merData.delivery_way[0] == '1') ||
              merData.delivery_way.length == 2
            " :gutter="24">
              <el-col :span="12">
                <el-form-item :label="$t('pickuppointname')" prop="mer_take_name">
                  <el-input v-model="merData.mer_take_name" maxlength="30" :placeholder="$t('please48')" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('pickuppointphone')" prop="mer_take_phone">
                  <el-input v-model="merData.mer_take_phone" :placeholder="$t('please115')" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-if="
              (merData.delivery_way.length == 1 &&
                merData.delivery_way[0] == '1') ||
              merData.delivery_way.length == 2
            ">
              <el-col :span="12">
                <el-form-item :label="$t('detailedaddress')" prop="mer_take_address">
                  <el-input v-model="merData.mer_take_address" :placeholder="$t('please65')" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('longitudeandlatitude')" prop="mer_take_location">
                  <el-input v-model="merData.mer_take_location" :enter-button="$t('findlocation')" style="width: 100%"
                    :placeholder="$t('please178')" readonly>
                    <el-button slot="append" style="
                        background: #46a6ff;
                        color: #fff;
                        border-radius: 0 4px 4px 0;
                      " @click="onSearchs">{{ $t("findlocation") }}</el-button>
                  </el-input>
                  <div slot="content">{{ $t("please190") }}</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-if="
              (merData.delivery_way.length == 1 &&
                merData.delivery_way[0] == '1') ||
              merData.delivery_way.length == 2
            ">
              <el-col :span="12">
                <el-form-item :label="$t('pickuppointbusinessdate')" prop="mer_take_day">
                  <el-select v-model="merData.mer_take_day" filterable multiple :placeholder="$t('please164')"
                    class="selWidth">
                    <el-option v-for="item in date" :key="item.date_id" :label="item.date_name" :value="item.date_id" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('pickuppointbusinesshours')" prop="mer_take_time">
                  <el-time-picker v-model="merData.mer_take_time" is-range :range-separator="$t('to')"
                    :start-placeholder="$t('starttime')" :end-placeholder="$t('endtime')"
                    :placeholder="$t('selecttimerange')" value-format="HH:mm" @change="onchangeTime" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item :label="$t('merchantprofile')" prop="mer_info" label-width="120px">
                  <el-input v-model="merData.mer_info" type="textarea" :placeholder="$t('tips19')" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('merchantkeyword')" prop="mer_keyword" label-width="120px">
                  <div class="tip-form">
                    <el-input v-model="merData.mer_keyword" style="min-width: 200px" :placeholder="$t('tips4')" />
                  </div>
                </el-form-item>
                <!-- <el-form-item :label="$t('servicetelephone ')" prop="service_phone" label-width="120px">
                  <el-input v-model="merData.service_phone" />
                </el-form-item> -->
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item :label="$t('merchantaddress')" prop="mer_address" label-width="120px">
                  <el-input v-model="merData.mer_address" :enter-button="$t('findlocation')" style="width: 100%"
                    :placeholder="$t('please43')">
                    <!-- <el-button slot="append" type="primary" @click="onSearch">{{
                      $t("findlocation")
                    }}</el-button> -->
					<!-- 上面这是查找位置 -->
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
           <!-- <Maps v-if="mapKey" ref="mapChild" class="map-sty" :map-key="mapKey" :lat="Number(merData.lat || 34.34127)"
              :lon="Number(merData.long || 108.93984)" :address="merData.mer_address"
              @getCoordinates="getCoordinates" /> -->
			  <!-- 上面这是地图 -->
            <el-form-item />
          </el-form>
        </div>
      </div>
      <div class="lab-title">{{ $t("functioninformation") }}</div>
      <div class="user-msg">
        <div class="basic-information">
          <!-- <div>
            {{ $t("merchantservicecharge") }}：{{
              Number(merData.commission_rate) > 0
                ? parseFloat(merData.commission_rate)
                : parseFloat(merData.merchantCategory.commission_rate * 100)
            }}%
          </div> -->
          <!-- <div>
            {{ $t("Purchase.profit") }}：{{
  Number(merData.spread_ratio) > 0
  ? parseFloat(merData.spread_ratio)
  : parseFloat(merData.merchantCategory.spread_ratio * 100)
            }}%
          </div> -->
          <div>
            {{ $t("additem") }} :{{
              merData.is_audit
                ? $t("needplatformreview")
                : $t("theplatformisfreeofaudit")
            }}
          </div>
        </div>
        <div class="basic-information">
          <div>
            {{ $t("openthelivebroadcastroom") }}：{{
              merData.is_bro_room
                ? $t("needplatformreview")
                : $t("theplatformisfreeofaudit")
            }}
          </div>
          <div>
            {{ $t("addliveproducts") }}：{{
              merData.is_bro_goods
                ? $t("needplatformreview")
                : $t("theplatformisfreeofaudit")
            }}
          </div>
        </div>
        <div class="basic-information">
          <div>
            {{ $t("platformhomepage ") }}：{{
              merData.is_best ? $t("yes") : $t("no")
            }}
          </div>
        </div>
      </div>
      <div class="submit-button">
        <el-button type="primary" :loading="submitLoading" @click="submitForm('ruleForm')">{{
          $t("submit")
        }}</el-button>
      </div>
    </div>
    <el-dialog v-if="modalMap" v-model="modalMap" :visible.sync="modalMap" :title="$t('selectlocation')"
      close-on-click-modal class="mapBox" custom-class="dialog-scustom">
      <iframe id="mapPage" width="100%" height="500px" frameborder="0" :src="keyUrl" />
    </el-dialog>
  </div>
</template>

<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import { storeGetInfoApi } from "@/api/setting";
import { getBaseInfo, merchantUpdate } from "@/api/user.js";
import Maps from "@/components/map/map.vue";
import { getToken } from "@/utils/auth";
import SettingMer from "@/libs/settingMer";
export default {
  name: "Information",
  components: { Maps },
  data() {
    var checkPhone = (rule, value, callback) => {
      if (value === "") {
        
      } else {
        let regPone = null;
        const mobile = /^[0-9@+-\s]{4,30}$/; // 最新16手机正则
        //const mobile = /^([0-9]{6,8}\-)([2-9][0-9]{4,7})+(\-[0-9]{1,4})?$/; // 电话限制
        //const tel = /^([0-9]{1,4}\-)([2-9][0-9]{4,7})+(\-[0-9]{1,4})?$/; // 座机固定电话限制
        if (value.charAt(0) == 0) {
          // charAt查找第一个字符方法，用来判断输入的是座机还是手机号
          regPone = tel;
        } else {
          regPone = mobile;
        }
        // if (!regPone.test(value)) {
        //   return callback(new Error(this.$t("please186")));
        // }
        // 座机固定电话限制
        callback();
      }
    };
    const validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error(this.$t("yourmobilenumber")));
      } else if (!/^[0-9A-Za-z@+*.-\s]{4,30}$/.test(value)) {
        callback(new Error(this.$t("please157")));
      } else {
        callback();
      }
    };
    return {
      merModel: false,
      modalMap: false,
      merData: {
        delivery_way: [],
        mer_take_name: "",
        mer_take_phone: "",
        mer_take_address: "",
        mer_take_time: ["", ""],
        mer_take_day: [],
        mer_take_location: "",
        id: 0,
        mer_take_status: 0,
      }, // 默认数据
      myHeaders: { "X-Token": getToken() },
      uploadedQualifications: [], // 资质图片列表
      mapKey: "", // 地图key
      address: "",
      key: "",
      date: [
        { date_name: this.$t("monday"), date_id: 1 },
        { date_name: this.$t("tuesday"), date_id: 2 },
        { date_name: this.$t("wednesday"), date_id: 3 },
        { date_name: this.$t("thursday"), date_id: 4 },
        { date_name: this.$t("friday"), date_id: 5 },
        { date_name: this.$t("saturday"), date_id: 6 },
        { date_name: this.$t("sunday"), date_id: 7 },
      ],
      submitLoading: false, // 提交loading
      deliveryList: [
        { value: "1", name: this.$t("pickupatthestore") },
        { value: "2", name: this.$t("expressdelivery") },
      ],
      rules: {
        mer_banner: [{ required: true, message: this.$t("please185") }],
        mer_avatar: [{ required: true, message: this.$t("please184") }],
        mer_info: [
          { required: true, message: this.$t("please59"), trigger: "blur" },
          {
            min: 3,
            max: 200,
            message: this.$t("please189"),
            trigger: "blur",
          },
        ],
        mer_keyword: [
          { required: false, message: this.$t("please60"), trigger: "blur" },
        ],
        service_phone: [
          { required: true, validator: checkPhone, trigger: "blur" },
        ],
        mer_address: [
          { required: true, message: this.$t("please61"), trigger: "blur" },
        ],
        uploadedqualifications: [
          { required: true, message: this.$t("please62"), trigger: "blur" },
        ],
        delivery_way: [
          { required: true, message: this.$t("please42"), trigger: "change" },
        ],
        mer_take_name: [
          { required: true, message: this.$t("please48"), trigger: "blur" },
        ],
        mer_take_day: [
          {
            required: true,
            type: "array",
            message: this.$t("please63"),
            trigger: "change",
          },
        ],
        mer_take_time: [
          {
            required: true,
            message: this.$t("please64"),
            trigger: "change",
          },
        ],
        mer_take_phone: [
          { required: true, validator: validatePhone, trigger: "blur" },
        ],
        mer_take_address: [
          { required: true, message: this.$t("please65"), trigger: "blur" },
        ],
        mer_take_location: [
          { required: true, message: this.$t("please165"), trigger: "blur" },
        ],
      },
      keyUrl: "",
    };
  },
  computed: {
    fileUrl() {
      return SettingMer.https + `/upload/certificate`;
    },
  },
  watch: {
    uploadedQualifications(val) {
      // 由于 uploadedqualifications 字段未被添加到 merData 对象中，因此，使用 1 或 '' 作为符号表示 merData 中的 uploadedqualifications 图片列表是否添加完毕
      if (val.length) {
        this.merData.uploadedqualifications = 1;
      } else {
        this.merData.uploadedqualifications = "";
      }
    },
  },
  created() {
    this.getMapInfo();
    this.getInfo();
  },
  mounted: function () {
    window.addEventListener(
      "message",
      function (event) {
        // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
        var loc = event.data;
        if (loc && loc.module === "locationPicker") {
          // 防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
          window.parent.selectAdderss(loc);
        }
      },
      false
    );
    window.selectAdderss = this.selectAdderss;
  },
  methods: {
    // 营业时间
    onchangeTime(e) {
      this.merData.mer_take_time = e;
    },
    // 选择经纬度
    selectAdderss(data) {
      this.merData.mer_take_location = data.latlng.lat + "," + data.latlng.lng;
      this.modalMap = false;
    },
    onSearchs() {
      if (!this.key || this.key == "") {
        this.$message.error(this.$t("please188"));
      } else this.modalMap = true;
    },
    // 地图信息获取
    getCoordinates(data) {
      // this.merData.mer_address = data.address;
      this.merData.lat = data.location.lat || 34.34127;
      this.merData.long = data.location.lng || 108.93984;
      console.log(data);
    },
    // 获取历史信息
    getInfo() {
      const that = this;
      that.merModel = false;
      getBaseInfo().then((res) => {
        that.merData = res.data;
        that.$set(that.merData, "uploadedqualifications", ""); // 资质图片列表
        that.$set(
          that.merData,
          "delivery_way",
          res.data.delivery_way && res.data.delivery_way.length
            ? res.data.delivery_way.map(String)
            : []
        );
        that.key = res.data.tx_map_key;
        const keys = res.data.tx_map_key;
        that.keyUrl = `https://apis.map.qq.com/tools/locpicker?type=1&key=${keys}&referer=myapp`;
        const info = res.data || null;
        that.merData.mer_take_time = info.mer_take_time || ["", ""];
        that.merData.mer_take_day = info.mer_take_day || [];
        that.merData.mer_take_phone = info.mer_take_phone;
        that.merData.mer_take_name = info.mer_take_name;
        that.merData.mer_take_address = info.mer_take_address;
        that.merData.mer_take_location =
          info.mer_take_location && info.mer_take_location.length
            ? info.mer_take_location[0] + "," + info.mer_take_location[1]
            : "";
        that.merData.mer_take_status = info.mer_take_status || 0;
        this.merModel = true;
        if (res.data.mer_certificate instanceof Array) {
          res.data.mer_certificate.forEach((item) => {
            that.uploadedQualifications.push({ url: item });
          });
        } else {
          that.uploadedQualifications = [];
        }
      });
    },
    // 提交/修改
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const dataKey = Object.keys(this.rules);
          const reqData = {};
          [...dataKey, "mer_state", "long", "lat", "mini_banner"].map(
            (item) => {
              reqData[item] = this.merData[item];
            }
          );
          reqData.mer_certificate = this.uploadedQualifications.map((item) =>
            item.response ? item.response.data.src : item.url
          );
          const location = this.merData.mer_take_location
            ? [
              this.merData.mer_take_location.split(",")[0],
              this.merData.mer_take_location.split(",")[1],
            ]
            : [];
          reqData.mer_take_location = location;
          this.submitLoading = true;
          merchantUpdate(reqData)
            .then((res) => {
              console.log(res);
              this.submitLoading = false;
              this.$message.success(this.$t("submittedsuccessfully"));
            })
            .catch((rej) => {
              this.submitLoading = false;
              this.$message.error(rej.data.message);
            });
        } else {
          this.$message.error(this.$t("please187"));
          this.submitLoading = false;
          return false;
        }
      });
    },
    // 查找位置
    onSearch() {
      console.log(this.$refs);
      this.$refs.mapChild.searchKeyword(this.merData.mer_address);
    },
    // 获取 map key
    getMapInfo() {
      const that = this;
      storeGetInfoApi()
        .then((res) => {
          console.log(res);
          this.mapKey = res.data.tx_map_key;
        })
        .catch(function (res) {
          that.$message.error(res.message);
        });
    },
    // 上传图片
    modalPicTap(tit, num, i) {
      const _this = this;
      this.$modalUpload((img) => {
        if (tit === "1" && !num) {
          _this.merData.mer_banner = img[0];
        }
        if (tit === "2" && !num) {
          _this.merData.mer_avatar = img[0];
        }
        if (tit === "3" && !num) {
          _this.merData.mini_banner = img[0];
        }
      }, tit);
    },

    // 资质图片删除
    deldetQualificationsList(index) {
      this.uploadedQualifications.splice(index, 1);
    },
    // 上传文件之前的钩子函数
    beforeUploadQualification() {
      if (this.uploadedQualifications.length >= 5) {
        this.$message.error(this.$t("tips28"));
        return false;
      } else {
        return true;
      }
    },
    // 上传成功
    setQualificationsList(response) {
      if (response.status === 200) {
        this.uploadedQualifications.push({ url: response.data.src });
        // this.$message.success(this.$t('uploadsucceeded'));
      } else {
        this.$message.error(response.message);
      }
    },
    // 查看资质图片
    viewImage(item, index) {
      this.$refs.elImage[index].clickHandler();
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep.el-textarea__inner {
  height: 90px;
}

.information {
  width: 100%;
  padding: 30px 40px 80px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;

  // .business-msg {
  //   width: 80%;
  // }
  h2 {
    text-align: center;
    color: #303133;
    font-weight: bold;
    font-size: 20px;
  }

  .lab-title {
    width: max-content;
    font-size: 14px;
    font-weight: bold;
    color: #303133;
    margin: 10px 10%;

    &::before {
      content: "";
      display: inline-block;
      width: 3px;
      height: 13px;
      background-color: #1890ff;
      margin-right: 6px;
      position: relative;
      top: 1px;
    }
  }

  .user-msg {
    padding: 0 20px;
    margin-top: 30px;
  }

  .basic-information {
    display: flex;
    justify-content: space-between;
    padding: 10px 10%;
    font-size: 13px;
    font-weight: bold;
    text-rendering: optimizeLegibility;
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
      Microsoft YaHei, Arial, sans-serif;
    color: #666666;

    >div {
      width: 350px;
      flex-wrap: nowrap;
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      white-space: nowrap;
    }
  }

  .trip {
    padding-left: 10px;
    color: #ffb027;
    font-weight: normal;
  }

  .selWidth {
    width: 100%;
  }

  .demo-ruleForm {
    overflow: hidden;

    .form-item {
      width: 48%;
      display: inline-block;
    }
  }

  .form-data {
    padding: 30px 8%;

    .map-sty {
      width: 90%;
      text-align: right;
      margin: 0 0 0 10%;
    }

    .pictrue img {
      border-radius: 4px;
      object-fit: cover;
    }

    .tip-form {
      display: flex;
      align-items: center;

      span {
        white-space: nowrap;
        padding-left: 10px;
        line-height: 20px;
      }
    }
  }

  .submit-button {
    display: flex;
    justify-content: center;
    position: fixed;
    bottom: 20px;
    // left: 50%;
    width: 80%;
    padding: 10px 0;
    background-color: rgba(255, 255, 255, 0.7);
  }
}

::v-deep .el-upload--picture-card {
  width: 58px;
  height: 58px;
  line-height: 70px;
}

::v-deep.el-upload-list__item {
  width: 58px;
  height: 58px;
}

.upLoadPicBox_qualification {
  display: flex;
  flex-wrap: wrap;

  .uploadpicBox_list {
    position: relative;
    height: 58px;
    width: 58px;
    margin: 0 20px 20px 0;

    .uploadpicBox_list_image {
      position: absolute;
      top: 0;
      left: 0;
      width: 58px;
      height: 58px;
      border-radius: 4px;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .uploadpicBox_list_method {
      position: absolute;
      top: 0;
      left: 0;
      font-size: 18px;
      font-weight: bold;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-around;
      background: rgba(0, 0, 0, 0.4);
      border-radius: 4px;
      opacity: 0;
      width: 100%;
      height: 100%;
      transition: 0.3s;
    }
  }
}

.uploadpicBox_list:hover .uploadpicBox_list_method {
  z-index: 11;
  opacity: 1;
}
</style>
